import { computed, reactive, ref } from "vue"
import { event } from "./event"
// 模块的选中
export function handleBlockfoucs(data, cb) {
  let selectIndex = ref(-1)
  // 找到最后点击选择的组件模块
  const lastSelectBlock = computed(() => {
    return data.value.blocks[selectIndex.value]
  })
  // 保存哪些数据被选中了
  const foucsData = computed(() => {
    let foucs = []
    let unfoucs = []
    data.value.blocks.forEach(item => {
      if (item.foucs) {
        foucs.push(item)
      } else {
        unfoucs.push(item)
      }
    })
    return { foucs, unfoucs }
  })
  // 模块的选中
  const blockMouseDown = (e, block, index) => {
    e.preventDefault();
    e.stopPropagation()
    // 选中当前组件后 给当前的组件中 添加一个属性foucs
    if (!e.shiftKey) {
      clearBlockFoucs()
    }
    block.foucs = !block.foucs
    selectIndex.value = index
    cb(e)
  }
  const clearBlockFoucs = () => {
    data.value.blocks.forEach(item => item.foucs = false)
  }
  const containerMousedown = () => {
    clearBlockFoucs()
    selectIndex.value = -1
  }
  return { blockMouseDown, foucsData, containerMousedown, lastSelectBlock }
}
// 模块的移动/拖动
export function handleBlockMove(foucsData, lastSelectBlock, data) {
  // 记录移动信息状态
  let dragState = {
    startX: 0,
    startY: 0,
    endX: '',
    endY: '',
    dragIng: false, // 是否正在 拖动
  }
  let markLine = reactive({
    x: null,
    y: null
  })
  const mousemove = (e) => {
    // 鼠标移动
    let { clientX: moveX, clientY: moveY } = e
    // 计算当前元素最新的left和top 在线里面找 并显示
    let left = moveX - dragState.startX + dragState.startLeft //  鼠标移动后 - 鼠标移动前 + 当前元素的left
    let top = moveY - dragState.startY + dragState.startTop

    // 先计算横线 距离参照物 还有5 像素时 展示这跟线
    let y = null
    let x = null
    dragState.lines.y.forEach(({ showTop: showTopY, top: topY }) => {
      console.log(Math.abs(topY - top), '>>>>>>>>>>Math.abs(topY - top)');

      if (Math.abs(topY - top) < 5) { // 说明接近了这个线
        y = showTopY // 线要展示的位置
        // 实现快速贴近
        //  moveY = dragState.startY - dragState.startTop - topY // 容器距离顶部的距离 + 目标的高度 就是最新 的 moveY
        return
      }
    })
    dragState.lines.x.forEach(({ showLeft: showLeftX, left: leftX }) => {
      if (Math.abs(leftX - left) < 5) { // 说明接近了这个线
        x = showLeftX // 线要展示的位置
        // 实现快速贴近
        //  moveX = dragState.startX - dragState.startLeft - leftX // 容器距离顶部的距离 + 目标的高度 就是最新 的 moveY
        return
      }
    })

    //  markLine 是一个响应式对象 x y 会自动更新 会导致视图更新
    markLine.x = x
    markLine.y = y

    let durX = moveX - dragState.startX  // 移动的距离
    let durY = moveY - dragState.startY
    // 把移动的位置 重新赋值给 block 进行刷新 然后 可以移动
    // 需要更新原始data中 
    foucsData.value.foucs.forEach((foucsItem, idx) => {
      foucsItem.top = dragState.startPos[idx].top + durY
      foucsItem.left = dragState.startPos[idx].left + durX
    })
    // 移动后 需要 记住 开始位置和结束 位置
    if(!dragState.dragIng) {
      dragState.dragIng = true
      event.emit('startDragComponent')
    }
  }
  const mouseup = () => {
    // 鼠标放开
    document.removeEventListener('mousemove', mousemove)
    document.removeEventListener('mouseup', mouseup)
    markLine.x = null
    markLine.y = null
    // 移动后 需要 记住 开始位置和结束 位置
    if(dragState.dragIng) {
      event.emit('endDragComponent')
    }
  }

  // 模块的 拖动
  const mousedown = (e) => {
    // 拿到当前元素的 宽高
    const { width: currentWidth, height: currentHeight, top, left } = lastSelectBlock.value // 当前拖砖的元素

    // 鼠标开始按下时 记录当前模块在屏幕中的位置（开始位置）
    dragState.startX = e.clientX
    dragState.startY = e.clientY
    dragState.startTop = top
    dragState.startLeft = left // 当前拖拽前的位置
    dragState.startPos = foucsData.value.foucs.map(({ top, left }) => ({ top, left }))
    dragState.dragIng = false // 按下 不是 拖动
    // 当前十种辅助线 计算和没选中之间的关系
    dragState.lines = (() => {
      const { unfoucs } = foucsData.value
      let lines = { x: [], y: [] } // 辅助线的位置 x表示竖线 y 表示横线
      const list = [...unfoucs,{ top, left, width: data.value.container.width, height: data.value.container.height }]
      list.forEach(unfoucsBlock => {
        const { top: targTop, left: targLeft, width: targWidth, height: targHeight } = unfoucsBlock
        // 当 当前元素拖动到 目前元素 top 一致时 要显示位置 顶对顶  top 一致
        lines.y.push({ showTop: targTop, top: targTop })
        // 底对顶部 即当前元素的底部 对目标元素的顶部
        lines.y.push({ showTop: targTop, top: targTop - currentHeight })
        // 中对中
        lines.y.push({ showTop: targTop + targHeight / 2, top: targTop + targHeight / 2 - currentHeight / 2 })
        // 底对底
        lines.y.push({ showTop: targTop + targHeight, top: targTop + targHeight - currentHeight })
        // 顶对底部 即当前元素的顶部 对目标元素的底部
        lines.y.push({ showTop: targTop + targHeight, top: targTop + targHeight })

        // 左对左
        lines.x.push({ showLeft: targLeft, left: targLeft })
        // 左对右
        lines.x.push({ showLeft: targLeft + targWidth, left: targLeft + targWidth })
         // 中对中
         lines.x.push({ showLeft: targLeft + targWidth / 2, left: targLeft + targWidth / 2 - currentWidth / 2 })
        // 右对右
        lines.x.push({ showLeft: targLeft + targWidth, left: targLeft + targWidth - currentWidth })
        // 右对左
        lines.x.push({ showLeft: targLeft, left: targLeft - currentWidth })
       
      })

      return lines
    })()

    document.addEventListener('mousemove', mousemove)
    document.addEventListener('mouseup', mouseup)
  }

  return { mousedown, markLine }
}